import { DatePicker } from 'antd';
import {useDrag} from "react-dnd";
import {CommonComponentProps} from "../../../../../components/editor/interface.ts";
import FormItem from "antd/es/form/FormItem";
import {CSSProperties} from "react";
import {removeSetter} from "../../../../utils/removeSetter.ts";
import {MoveDrop} from "../../../../hooks/useMoveDrop.tsx";
const { RangePicker } = DatePicker;
export interface RangePickerProps extends CommonComponentProps {
    id: number;
    name: string;
    styles?: CSSProperties;
    parentId: number;
    children?: any;
    label:string
    startField:string
    endField:string
    picker:any[]
    format:any[]
    showNow:boolean
    showTime:boolean
    disabled:boolean
    allowClear:boolean
}
const RangePickerDev = (props:RangePickerProps) => {

    const {id,name,styles} = props;
    const [_,drag] = useDrag({
        type:"RangePicker",
        item:{
            type:name,
            id,
            dragType:"move"
        }
    })
    const ComponentProps = removeSetter({...props},["children","parentId"])

    return (
        <div className={'relative'}  data-component-id={id}  ref={drag} style={styles}>
            <MoveDrop key={name} dropComponentId={id} parentId={props.parentId}  />
            <FormItem>
                <FormItem  label={props.label} name={props.name} rules={props.rule} style={{margin:"0",...styles}}>
                    <RangePicker {...ComponentProps} />
                </FormItem>
            </FormItem>
        </div>
    );
};

export default RangePickerDev;